import React from 'react'
import Loadable from 'react-loadable'
import '../App.css'

const MyLoadingComponent = ({ isLoading, error }) => {
  // Handle the loading state
  if (!isLoading) {
    return <div className="Myloading">Loading...</div>
  } else if (error) {
    return (
      <div className="Myloading">
        Sorry, there was a problem loading the page.
      </div>
    )
  } else {
    return null
  }
}
const Record = Loadable({
  loader: () => import('../pages/Record/index.jsx'),
  loading: MyLoadingComponent,
})
const Evaluate = Loadable({
  loader: () => import('../pages/Evaluate/index.jsx'),
  loading: MyLoadingComponent,
})
const Exem = Loadable({
  loader: () => import('../pages/Exem/index.jsx'),
  loading: MyLoadingComponent,
})
const Risk = Loadable({
  loader: () => import('../pages/Risk/index.jsx'),
  loading: MyLoadingComponent,
})
const Expert = Loadable({
  loader: () => import('../pages/Expert/index.jsx'),
  loading: MyLoadingComponent,
})
const ReportForm = Loadable({
  loader: () => import('../pages/ReportForm/index.jsx'),
  loading: MyLoadingComponent,
})
const DataConfig = Loadable({
  loader: () => import('../pages/DataConfig/index.jsx'),
  loading: MyLoadingComponent,
})
const ImportExport = Loadable({
  loader: () => import('../pages/ImportExport/index.jsx'),
  loading: MyLoadingComponent,
})
const Login = Loadable({
  loader: () => import('../pages/Login/index.jsx'),
  loading: MyLoadingComponent,
})
const CertificateConfig = Loadable({
  loader: () => import('../pages/CertificateConfig/index.jsx'),
  loading: MyLoadingComponent,
})
const CertificateManager = Loadable({
  loader: () => import('../pages/CertificateManager/index.jsx'),
  loading: MyLoadingComponent,
})
const routers = [
  {
    path: '/Tmfs/Record',
    component: Record,
    key: 1,
  },
  {
    component: Evaluate,
    path: '/Tmfs/Evaluate',
    key: 2,
  },
  {
    component: Exem,
    path: '/Tmfs/Exem',
    key: 3,
  },
  {
    component: Risk,
    path: '/Tmfs/Risk',
    key: 4,
  },
  {
    component: Expert,
    path: '/Tmfs/Expert',
    key: 5,
  },
  {
    component: ReportForm,
    path: '/Tmfs/ReportForm',
    key: 6,
  },
  {
    component: DataConfig,
    path: '/Tmfs/DataConfig',
    key: 7,
  },
  {
    component: ImportExport,
    path: '/Tmfs/ImportExport',
    key: 8,
  },
  {
    component: CertificateConfig,
    path: '/Tmfs/CertificateConfig',
    key: 9,
  },
  {
    component: CertificateManager,
    path: '/Tmfs/CertificateManager',
    key: 10,
  },
  {
    component: Login,
    path: '/Tmfs/Login',
    key: 11,
  },
]

export default routers
